<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小枫音乐播放器 - 配置页</title>
    <script src="./assets/js/compatible.js"></script>
    <link rel="shortcut icon" href="https://www.xfabe.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <div id="app" class="container">
        <div class="row mt-3 rounded-3 overflow-hidden">
            <div class="alert alert-dismissible bg-white">
                <p>
                    <strong>感谢TA们的赞助: </strong>
                    <a 
                        v-for="(item, index) in sponsor" :key="index"
                        :href="item.link" 
                        target="_blank" rel="noopener noreferrer" 
                        :class="`btn btn-${item.bg} badge rounded-pill fw-normal ml-1`">{{ item.text }}</a>
                </p>
            </div>
        </div>
        <div class="row justify-content-between bg-white row-column-reverse rounded-3 overflow-hidden">
            <div class="col-md-6 p-3">
                <div class="col-md-12">
                    <div class="alert alert-dismissible alert-danger fs-7"><strong>插件使用：</strong> 将下面的播放器代码插入到网页源码底部<span class="badge bg-danger rounded-pill"> &lt;/body&gt; </span>标签的上面</div>
                    <div class="alert alert-dismissible alert-success fs-7 mt-3">
                        <strong>源码下载地址：</strong>
                        <a class="btn btn-outline-success btn-sm" href="https://gitee.com/xfwlclub/xf-MusicPlayer" target="_blank" rel="noopener noreferrer">播放器源码下载</a>
                        <a class="btn btn-outline-danger btn-sm" href="https://www.vxras.com/download/vxras-music.zip" target="_blank" rel="noopener noreferrer">Wordpress插件下载</a>
                    </div>
                    <div class="form-group position-relative copy-box">
                        <button class="position-absolute btn btn-success p-md-1 copy-code" @click="copyCode">复 制</button>
                        <textarea class="form-control fs-7" id="musicCode" rows="8">{{ config }}</textarea>
                    </div>
                </div>
            </div>
            <div class="col-md-6 p-3">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-bs-toggle="tab" href="#allSet" aria-selected="true" role="tab">全局配置</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#wy" aria-selected="false" role="tab" tabindex="-1">网易音乐</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#local" aria-selected="false" role="tab" tabindex="-1">本地音乐</a>
                    </li>
                </ul>
                <form @submit.prevent="form">
                    <div id="myTabContent" class="tab-content mt-4">
                        <div class="tab-pane fade active show" id="allSet" role="tabpanel">
                            <div class="col-12">
                                <div class="d-flex align-items-center mb-3">
                                        <span class="input-group-text fs-6">设置播放器主题</span>
                                        <select class="form-select mlr-1" v-model="Info.theme">
                                            <option value="">切换主题</option>
                                            <option v-for="(item, index) in allSet.themes" :key="index" :value="item.attr">{{ item.msg }}</option>
                                        </select>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <span class="input-group-text fs-6">播放器距离底部高度</span>
                                    <div class="form-group mlr-1">
                                        <input class="form-control" type="text" placeholder="默认高度为: 2em" v-model.trim="Info.playerHeight">
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-3" v-for="(item, index) in allSet.ck" :key="index">
                                    <span class="input-group-text fs-6">{{ item.title }}</span>
                                    <div class="form-check form-switch mlr-1">
                                        <input class="form-check-input checkbox-size"
                                            type="checkbox"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            :data-bs-original-title="item.msg"
                                            v-model="item.checked">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="wy" role="tabpanel">
                        <div class="tab-pane fade active show" id="allSet" role="tabpanel">
                            <div class="col-12">
                                <div class="d-flex align-items-center mb-3">
                                        <span class="input-group-text fs-6">选择歌榜</span>
                                        <select class="form-select mlr-1" v-model="Info.songList">
                                            <option value="">切换音乐歌榜</option>
                                            <option v-for="(item, index) in wy.songList" :key="index" :value="item.msg">{{ item.msg }}</option>
                                        </select>
                                </div>
                                <div class="d-flex align-items-center mb-3" v-for="(item, index) in wy.wySet" :key="index">
                                    <span class="input-group-text fs-6">{{ item.title }}</span>
                                    <div class="form-check form-switch mlr-1">
                                        <input class="form-check-input checkbox-size" 
                                            type="checkbox"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            :data-bs-original-title="item.msg"
                                            v-model="item.checked">
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <span class="input-group-text fs-6">输入歌单ID</span>
                                    <div class="form-group mlr-1">
                                        <input class="form-control"
                                            type="text"
                                            placeholder="例如: 2192163086"
                                            v-model.trim="Info.songId"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            data-bs-original-title="如果歌榜id为空默认输出歌榜选定的音乐, 反之你输入了id就会输出你的歌单音乐">
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="tab-pane fade" id="local" role="tabpanel">
                            <h5 class="alert alert-dismissible alert-secondary fs-7">功能开发中....</h5>
                        </div>
                    </div>
                    <div class="mt-4 w-100 text-lg-start">
                        <button type="submit" class="btn btn-primary">保 存</button>
                        <button type="button" class="btn btn-secondary mlr-1" @click="run">测 试</button>
                    </div>
                </form>
            </div>
        </div>
        <footer class="row mt-5 w-100 text-center">
            <p class="mt-3">本站由<a href="https://www.xfabe.com" target="_blank" rel="noopener noreferrer">小枫网络</a>推出</p>
            <p>Copyright &copy; {{ year }} 小枫音乐播放器</p>
        </footer>
    </div>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script src="./assets/js/index.js"></script>
    <%- data %>
</body>

</html>